<template>
  <div class="voteList-container">
    <el-tabs type="card"
    >
      <el-tab-pane label="投票列表">
        <el-empty description="这里空空如也" v-if="!list.length"/>
        <el-collapse :accordion="true" v-else @change="options.voteRes = false">
          <el-collapse-item
              v-for="(vote, index) in list"
              :key="vote.electionId + index"
              :title="
              index +
              1 +
              vote.electionTitle +
              '[' +
              timestampToTime(vote.electionCreatedate) +
              ']'
            "
          >
            <el-card>
              <el-button
                  v-show="!options.voteRes"
                  type="success"
                  @click="handleGetVoteInfo(vote.electionId)"
              >查看投票结果
              </el-button>
              <el-row v-show="options.voteRes" class="box-card">
                <el-col v-for="(item,index) in options.voteRes" :key="item.title+index">
                  {{ item.title }}
                  <el-progress :color="options.customColors"
                               :format="format"
                               :percentage="item.result"
                               :stroke-width="26"
                               :text-inside="true"
                  />
                </el-col>
              </el-row>
            </el-card>
          </el-collapse-item>
        </el-collapse>
        <el-pagination
            :current-page="currentPage"
            :page-size="currentPageSize"
            :page-sizes="[10, 50, 100, 500, 1000, 99999]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleGetBySizeActivity"
            @current-change="handleGetByNumActivity"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      currentPage: 1,
      currentPageSize: 10,
      total: 0,
      content: "",
      voteContentshow: false,
      addVoteContentShow: false,
      options: {
        voteRes: null,
        voteResResult: null,
        customColors: [
          {
            color: "#0d05f3",
            percentage: 20,
          },
          {
            color: "#e6a23c",
            percentage: 40,
          },
          {
            color: "#5cb87a",
            percentage: 60,
          },
          {
            color: "#1989fa",
            percentage: 80,
          },
          {
            color: "#6f7ad3",
            percentage: 100,
          },
        ],
      },
    };
  },
  mounted () {
    this.handleGetAllVote();
  },
  methods: {
    // 分页查询全部闲置
    async handleGetAllVote () {
      const res = await this.$http.electionAll(
          {
            pageNum: this.currentPage,
            pageSize: this.currentPageSize,
          });
      if (res.code !== 0) return this.$message.error(res.msg);
      this.list = res.data.list;
      this.total = res.data.totalCount;
    },
    async handleGetBySizeActivity (size) {
      this.currentPageSize = size;
      await this.handleGetAllVote();
    },

    // 分页查询全部活动
    async handleGetByNumActivity (num) {
      this.currentPage = num;
      await this.handleGetAllVote();
    },
    async handleGetVoteInfo (e) {
      let voteRes = [];
      let total = 0;
      const res = await this.$http.electionGetVoteResultByElectionId(e);

      for (let each in res.data) {
        voteRes.push({
          title: each,
          result: res.data[each],
        });
        total += ~~res.data[each];
      }
      this.voteContentshow = true;
      this.options.voteRes = voteRes;
      this.options.voteResResult = total;
    },
    timestampToTime (timestamp) {
      const date = new Date(timestamp);// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + "-";
      const M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
      const D = date.getDate() + " ";
      return Y + M + D;
    },
    format (percentage) {
      return `${percentage}票`;
    },
  },

};
</script>
